<template>
 <div class="create">
  <form class="flex_box">
    <label for="title">标题</label>
    <input type="text"  v-model="title" required  class="title"/>
    <label for="body">内容</label>
    <textarea v-model="body" class="body"></textarea>
    <lable for="tag">标签（回车添加标签）</lable>
    <input type="text" v-model="tag" class="pill" @keydown.enter.prevent="handleKeydown">
    <!-- 显示标签 -->
    <div v-for="tag in  tags" :key="tag" class="pill">{{tag}}</div>
    <button class="add_btn">添加</button>
  </form>
 </div>
</template>
<script setup>
const title = ref("");
const body = ref("");
const tags = ref([]);
const tag = ref("");

const handleKeydown = ()=>{
  if(!tags.value.includes(tag.value)){
    tag.value = tag.value.replace(/\s/g,'')
    tags.value.push(tag.value)
  }
  tag.value = ""
}





</script>
<style scoped>
.create {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.flex_box {
  width: 300px;
  display: flex;
  flex-direction: column;
}
.title {
  height: 30px;
  outline: none;
  margin-bottom: 20px;
}
.body {
 height: 100px;
}
.pill {
  height: 34px;
  outline: none;

}
.add_btn {
  margin-top: 10px;
}
</style>